<template>
    <div class="demo">    
        <h1 class="bigfont">学生{{name}}{{address}}</h1>
    </div>
</template>

<script>
    export default {
        name:"MySchool",
        data(){
            return {
                name:'zzz1',
                address:"zzzzzzzzfffffff"
            }
        },
    }
</script>

// scoped是区部css渲染，只负责当前这个vue文件的template的渲染。其引用的不算是scoped
// 定义成less样式语言
<style scoped lang="less">
    .demo{
        background-color: skyblue;
        // less的经典嵌套写法
        .bigfont{
            font-size:60px;
        }
    }
</style>
// 要安装less-loader
// 先用npm view webpack version查看webpack的当前版本
// 先用npm view webpack versions查看webpack的所有版本
// 先用npm view less-loader versions查看webpack的所有版本
// webpack 4对应的是less loader 7
// webpack 5对应的是less-loader 8+
// npm install less-loader就成功了。
// 如果报错的话，运行下面的就成功了。
// npm install less less-loader --save-dev